<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱宠之家 - 宠物领养与选购</title>
    <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
    <link href="styles.css" rel="stylesheet">
</head>

<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">爱宠之家</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="nav-item">
                        <a class="nav-link" href="./view/adoption/adoption.html">宠物领养</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./view/cats/cats.html">猫咪选购</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./view/large-dogs/large-dogs.html">小型犬选购</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./view/large-dogs/large-dogs.html">大型犬选购</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./view/food/food.html">宠物用品</a>
                    </li>
                    <li class="nav-item ms-2">
                        <a class="btn btn-primary" href="./view/user/login.html">登录/注册</a>
                    </li>
                    <!-- <li class="nav-item ms-2">
                        <form class="d-flex">
                            <input class="form-control me-2" type="search" placeholder="搜索宠物或用品">
                            <button class="btn btn-outline-primary" type="submit">搜索</button>
                        </form>
                    </li> -->
                </ul>
            </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div id="mainCarousel" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <ol class="carousel-indicators">
            <li data-target="#mainCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#mainCarousel" data-slide-to="1"></li>
            <li data-target="#mainCarousel" data-slide-to="2"></li>
        </ol>

        <!-- 轮播项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="https://images.unsplash.com/photo-1450778869180-41d0601e046e?auto=format&fit=crop&w=1920&h=600"
                    alt="宠物领养">
                <div class="carousel-caption">
                    <h2>为流浪宠物寻找温暖的家</h2>
                    <p>每一次领养，都是一次生命的救赎</p>
                </div>
            </div>
            <div class="item">
                <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?auto=format&fit=crop&w=1920&h=600"
                    alt="猫咪选购">
                <div class="carousel-caption">
                    <h2>精选品种猫咪</h2>
                    <p>专业繁育，健康保障</p>
                </div>
            </div>
            <div class="item">
                <img src="https://images.unsplash.com/photo-1534361960057-19889db9621e?auto=format&fit=crop&w=1920&h=600"
                    alt="狗狗选购">
                <div class="carousel-caption">
                    <h2>萌宠犬类精选</h2>
                    <p>多个品种，专业认证</p>
                </div>
            </div>
        </div>

        <!-- 控制按钮 -->
        <a class="left carousel-control" href="#mainCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">上一个</span>
        </a>
        <a class="right carousel-control" href="#mainCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">下一个</span>
        </a>
    </div>

    <!-- 快速通道 -->
    <div class="container mt-5">
        <div class="row g-4">
            <div class="col-md-3 col-6">
                <div class="card text-center feature-card">
                    <div class="card-body">
                        <i class="bi bi-heart"></i>
                        <h5 class="card-title">爱心领养</h5>
                        <p class="card-text">为流浪动物提供一个家</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="card text-center feature-card">
                    <div class="card-body">
                        <i class="bi bi-cat"></i>
                        <h5 class="card-title">猫咪之家</h5>
                        <p class="card-text">多品种猫咪等你选</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="card text-center feature-card">
                    <div class="card-body">
                        <i class="bi bi-emoji-smile"></i>
                        <h5 class="card-title">快乐犬舍</h5>
                        <p class="card-text">专业繁育，品质保证</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="card text-center feature-card">
                    <div class="card-body">
                        <i class="bi bi-bag"></i>
                        <h5 class="card-title">宠物用品</h5>
                        <p class="card-text">一站式购物体验</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 推荐领养区 -->
    <div class="container mt-5">
        <div class="section-header">
            <h3>推荐领养</h3>
            <p class="text-muted">这些小可爱正在等待一个温暖的家</p>
        </div>
        <div class="row g-4">
            <div class="col-md-3 col-6">
                <div class="card pet-card">
                    <div class="pet-tag">待领养</div>
                    <img src="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?auto=format&fit=crop&w=300&h=300"
                        class="card-img-top" alt="可爱猫咪">
                    <div class="card-body">
                        <h5 class="card-title">小橘子 | 橘猫</h5>
                        <p class="card-text">1岁 | 已绝育 | 亲人可爱</p>
                        <div class="location"><i class="bi bi-geo-alt"></i> 北京市朝阳区</div>
                        <button class="btn btn-primary w-100">我要领养</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="card pet-card">
                    <div class="pet-tag">待领养</div>
                    <img src="https://images.unsplash.com/photo-1543466835-00a7907e9de1?auto=format&fit=crop&w=300&h=300"
                        class="card-img-top" alt="小狗">
                    <div class="card-body">
                        <h5 class="card-title">奶糖 | 柯基</h5>
                        <p class="card-text">8个月 | 已疫苗 | 活泼好动</p>
                        <div class="location"><i class="bi bi-geo-alt"></i> 上海市浦东新区</div>
                        <button class="btn btn-primary w-100">我要领养</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="card pet-card">
                    <div class="pet-tag">待领养</div>
                    <img src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?auto=format&fit=crop&w=300&h=300"
                        class="card-img-top" alt="英短猫">
                    <div class="card-body">
                        <h5 class="card-title">灰灰 | 英短</h5>
                        <p class="card-text">2岁 | 已绝育 | 温顺亲人</p>
                        <div class="location"><i class="bi bi-geo-alt"></i> 广州市天河区</div>
                        <button class="btn btn-primary w-100">我要领养</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="card pet-card">
                    <div class="pet-tag">待领养</div>
                    <img src="https://images.unsplash.com/photo-1537151625747-768eb6cf92b2?auto=format&fit=crop&w=300&h=300"
                        class="card-img-top" alt="金毛">
                    <div class="card-body">
                        <h5 class="card-title">阳阳 | 金毛</h5>
                        <p class="card-text">1.5岁 | 已绝育 | 亲人听话</p>
                        <div class="location"><i class="bi bi-geo-alt"></i> 深圳市南山区</div>
                        <button class="btn btn-primary w-100">我要领养</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <h5>关于我们</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">平台介绍</a></li>
                        <li><a href="#">领养须知</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>服务支持</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">领养流程</a></li>
                        <li><a href="#">宠物寄养</a></li>
                        <li><a href="#">宠物医疗</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>帮助中心</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">服务条款</a></li>
                        <li><a href="#">隐私政策</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>关注我们</h5>
                    <ul class="list-unstyled">
                        <li><a href="#"><i class="bi bi-wechat me-2"></i>官方微信</a></li>
                        <li><a href="#"><i class="bi bi-weibo me-2"></i>新浪微博</a></li>
                        <li><a href="#"><i class="bi bi-telephone me-2"></i>400-888-9999</a></li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="text-center">
                <p class="mb-0">Copyright © 2024 爱宠之家 All Rights Reserved</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="./plugins/jquery/jquery.min.js"></script>
    <script src="./plugins/bootstrap/js/bootstrap.js"></script>

    <!-- 添加自定义样式修复轮播图问题 -->
    <style>
        /* 轮播图容器样式 */
        #mainCarousel {
            margin-bottom: 30px;
        }

        /* 轮播图项目样式 */
        .carousel-inner .item {
            height: 500px;
        }

        .carousel-inner .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 轮播图标题样式 */
        .carousel-caption {
            background-color: rgba(0, 0, 0, 0.5);
            padding: 15px;
            border-radius: 5px;
            bottom: 20px;
        }

        .carousel-caption h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .carousel-caption p {
            font-size: 16px;
            margin-bottom: 0;
        }

        /* 轮播图控制按钮样式 */
        .carousel-control {
            width: 5%;
            opacity: 0.8;
        }

        .carousel-control .glyphicon {
            position: absolute;
            top: 50%;
            margin-top: -10px;
            z-index: 5;
            display: inline-block;
        }

        .carousel-control.left {
            background-image: none;
        }

        .carousel-control.right {
            background-image: none;
        }
    </style>

    <!-- 确保正确引入Bootstrap和jQuery -->
    <script>
        $(document).ready(function () {
            // 检查jQuery是否正确加载
            if (typeof jQuery != 'undefined') {
                console.log('jQuery已加载');

                // 检查carousel方法是否存在
                if (typeof $('#mainCarousel').carousel === 'function') {
                    console.log('carousel方法存在');

                    // 初始化轮播图
                    $('#mainCarousel').carousel({
                        interval: 5000
                    });
                } else {
                    console.error('carousel方法不存在，可能Bootstrap未正确加载');
                }
            } else {
                console.error('jQuery未加载');
            }
        });
    </script>
</body>

</html>